$(function(){

	(function (doc, win) {

        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        var clientWidth = '',newWidth = '',ctimer = null;
        recalc = function () {

            newWidth = $(window).width();

            clearTimeout(ctimer);

            //if(!clientWidth && newWidth < 1300) return false;

            if(newWidth === clientWidth) return false;

            clientWidth = newWidth;

            docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';

            ctimer = setTimeout(function(){

            	// $(".chart-box").html('');

            	loadingChart();

            },25)



        };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);

        recalc();

    })(document, window);

    /**
     * 数据来源 提示框
     */
    
    function dataSourceTag(str){

    	str = str || '数据来源 提示框';

    	if($(".qicon-fix").length < 1){

    		return '<div class="qicon-fix">'+str+'</div>';
    	}
    }

    $(".title-qicon").on("mouseover",function(e){

    	var _x = e.pageX,_y = e.pageY,scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    	dataSourceTag();

    	$(".qicon-fix").css({"left": _x - 100 + "px","top": _y - 60 - scrollTop + "px"}).fadeIn();

    	return false;

    })

    $(".title-qicon").on("mouseleave",function(){

    	$(".qicon-fix").hide();
    })

    /**
     * 作品信息切换
     */
    $(".dt-btn").on("click",function(){

    	if($(this).hasClass("active")) return false;

    	$(this).addClass("active").siblings().removeClass("active");

    	var _type = $(this).attr("data-type"),_className = ".info-"+_type;

    	$(_className).fadeIn().siblings().hide();


    	return false;
    })


    function showLIines(){
		var myChart = echarts.init(document.getElementById('chart1'));
		 // 指定图表的配置项和数据
	    option = {
	    	baseOption: {
	    		title: {
			    	show: false,
			        text: ''
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			    	show: false,
			        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: true,
			        data: ['周一','周二','周三','周四','周五','周六','周日'],
			        axisLabel: {
	                    textStyle: {
	                        color: '#fff'//坐标轴文字的样式
	                    },
	                    align: "center"
		            },
		            axisLine: {
		            	lineStyle: {
		            		color: "#ccc" //坐标轴的样式
		            	}
		            },
		            axisTick: {
		            	show: false,//x 坐标轴 刻度 设置

		            },
		            // axisTick: {
		            // 	alignWithLabel: true
		            // },
			    },
			    yAxis: {
			        type: 'value',
			        // right: "10px",
			        splitLine:{
		            	show: true,
		            	lineStyle: {
		            		color: "#ccc",//横向分割线的 样式
		            	}
		            },
		            axisLabel: {
		            	formatter: '{value}',
		                textStyle: {
		                    color: '#fff'
		                },
		                // align: 'center'
		            },
		            axisLine: {
		            	lineStyle: {
		            		color: "transparent" //坐标轴的样式
		            	}
		            },
			    },
			    series: [
			        {
			            name:'邮件营销',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[120, 132, 101, 134, 90, 230, 210],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'联盟广告',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[220, 182, 191, 234, 290, 330, 310],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'视频广告',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[150, 232, 201, 154, 190, 330, 410],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'直接访问',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[320, 332, 301, 334, 390, 330, 320],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'搜索引擎',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[820, 932, 901, 934, 1290, 1330, 1320],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        }
			    ]
	    	},
	    	// media: [
	    	// 	{
	    	// 		query: {
	    	// 			maxWidth: 300,
    		// 			//maxHeight: 300,
    		// 			//minAspectRatio: 1.3//缩放比
	    	// 		},
	    	// 		option: {
	    	// 			grid: {
	    	// 				left: "13%"
	    	// 			}
	    	// 		}
	    	// 	}
	    	// ]
		};

	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	// showLIines();


    /**
     * 大盘走势
     */
    function marketTrend(id,dayData,data){

        if(!id) return false;

        $("#" + id).parent().html('').append('<div id="'+id+'" class="chart-box"></div>');

        var myChart = echarts.init(document.getElementById(id));

        option = {
            title: {
                show: false,
                text: '',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 16
                }
            },
            grid: {
                width: "80%",
                height: "76%",
                top: '5%',
                left: '10%',
                containLabel: false
            },

            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dayData,
                axisLabel: {
                    textStyle: {
                        color: '#0b526b'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#1f344a',
                    }
                },
                axisTick: {
                    show: false,
                    inside: true,
                    alignWithLabel: true
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: 'transparent'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1f344a'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            series: [
                {
                    name: '英伦对决',
                    type: 'line',
                    data:data,
                    symbolSize:8,
                    // smooth: true,
                    itemStyle : { //折线拐点标志的样式
                        normal: {
                            opacity: 0,
                            color: "#ff4f4f"
                        },
                        emphasis: {
                            opacity: 0
                        }

                    },
                    lineStyle: {
                        normal: {
                            color: "#ff4f4f"
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(255, 79, 79, 0.5)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 79, 79, 0)',
                                }],
                                globalCoord: false
                            },
                        }
                    }
                }
            ],
            lineStyle: {
                normal: {
                    width: 1
                }
            },
        }

        myChart.setOption(option);

    }











	

	function example(id){

		$("#" + id).parent().html('').append('<div id="'+id+'" class="chart-box"></div>');

		var myChart = echarts.init(document.getElementById(id));

		myChart.setOption(option);

	}

	// 加载数据表格
	function loadingChart(){

		daysAverageIndex('chart1','平均想看日增数',"#000");//示例
		daysAverageIndex('chart2');

		daysAverageIndex('chart4');
		//marketTrend('chart5');

		//flatPlaySumPercentage('chart7');
		//occupationRatio('chart8');
		//educationLevel('chart9');
		//ageRatio('chart10');
	}
	
})